<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传Excel文件</title>
    <link rel="icon" href="/static/favicon.png" >

    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        background: linear-gradient(-45deg, #f12711, #f5af19, #fca20d, #2b5876, #4e4376);
        background-size: 400% 400%;
        animation: gradient-animation 5s ease infinite;
      }
      
      @keyframes gradient-animation {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      
      h1 {
        text-align: center;
        margin-top: 50px;
        color: #fff;
        text-shadow: 2px 2px rgba(0,0,0,0.5);
      }
      
      .container {
        max-width: 500px;
        margin: 0 auto;
        background-color: #bdc3c7; /* 银灰色 */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }
      
      label {
        font-size: 18px;
        display: block;
        margin-bottom: 10px;
      }
      
      input[type="file"] {
        display: block;
        margin-bottom: 20px;
      }
      
      input[type="submit"] {
        background-color: #4CAF50;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        transition: background-color 0.3s ease;
      }
      
      input[type="submit"]:hover {
        background-color: #3e8e41;
      }
      
      .form-wrapper {
        background-color: #cfe2f3;
        padding: 20px;
        border-radius: 5px;
        margin-top: 20px;
      }
      
      /* 当屏幕宽度小于等于 767px 时，修改样式 */
      @media screen and (max-width: 767px) {
        body {
          /* 在小屏幕上，背景渐变可能不够清晰，可以修改为纯色或简单的渐变 */
          background: #f1f1f1;
        }

        .container {
          /* 在小屏幕上，将容器的最大宽度设置为100% */
          max-width: 100%;
        }

        .form-wrapper {
          /* 在小屏幕上，增加一些边距 */
          padding: 10px;
        }
      }

      /* 当屏幕宽度大于 768px 时，修改样式 */
      @media screen and (min-width: 768px) {
        .container {
          /* 在大屏幕上，将容器的最大宽度设置为768px */
          max-width: 768px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>上传Excel文件 </h1> 
      <div class="form-wrapper">
        <form action="/readfile" method="post" enctype="multipart/form-data">
          <label for="file">选择文件：</label>
          <input type="file" name="file" id="file">
          <input type="submit" value="上传">
        </form>
      </div>
      <div id="result"></div> <!-- 显示响应结果的元素 -->
    </div>
    <script>
      const form = document.querySelector('form');
      form.addEventListener('submit', (event) => {
        event.preventDefault(); // 阻止表单提交
        const file = document.getElementById('file').files[0];
        const allowedExtensions = /(\.xlsx|\.xls)$/i; // 只允许上传 .xlsx 或 .xls 文件
        if (!allowedExtensions.exec(file.name)) {
          alert('只能上传Excel文件（.xlsx 或 .xls）'); // 显示警告消息
          return false; // 阻止表单提交
        }
        const formData = new FormData();
        formData.append('file', file);
        fetch('/readfile', {
          method: 'POST',
          body: formData
        })
        .then((response) => {
          if (response.status === 200) {
            return response.text(); // 获取文本响应
          } else {
           throw new Error('上传文件失败');
          }
        })
        .then((data) => {
          const resultDiv = document.getElementById('result');
          resultDiv.textContent = data; // 显示文本数据
        })
        .catch((error) => {
          console.error(error);
        });
      });
    </script>
  </body>
</html>